<template>
  <div class="home">
    <div class="heads">
      <div class="top">用户名</div>
      <div class="ceter"></div>
      <div class="fot">欢迎您13661323704(普通会员)</div>
    </div>
    <div class="mains">
      <div class="da" @click="showNotify">
        <div>我的关注</div>
        <div><van-icon name="arrow" /></div>
      </div>
      <div class="da" @click="showNo">
        <div>我的预约</div>
        <div>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    <div class="footer">退出登录</div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    showNotify() {
      this.$router.push("/pages/Follow/Follow");
    },
    showNo() {
      this.$router.push("/pages/Make/Make");
    },
  },
};
</script>

<style>
.home {
  width: 100%;
  height: 180px;
  background: #f54848;
  text-align: center;
}
.heads {
  background: #f54848;
  color: #fff;
}
.top {
  font-weight: 700;
  font-size: 1.069304rem;
  padding-top: 1.24508rem;
  padding-bottom: 1.4648rem;
}
.ceter {
  width: 3.618056rem;
  height: 3.618056rem;
  margin: 0 auto 0.7324rem;
  border: 2px solid #fff;
  border-radius: 50%;
  overflow: hidden;
}
.fot {
  font-weight: 700;
  font-size: 0.937472rem;
  margin-bottom: 1.3rem;
}
.mains {
  width: 100%;
  height: 90px;
}
.footer {
  width: 100%;
  height: 50px;
  color: #fff;
  line-height: 50px;
  background: #d32f2f;
}
.footer button {
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 0%;
}
.da {
  display: flex;
  padding: 10px;
  justify-content: space-between;
}
</style>
